<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>易买网 - 首页</title>
    <link type="text/css" rel="stylesheet" href="css/style.css"/>
    <script type="text/javascript" src="scripts/function.js"></script>
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
</head>
<body>
<div id="header" class="wrap">
    <div id="logo"><img src="images/logo.gif"/></div>
    <div class="help"><a href="#" class="shopping">购物车</a><a href="login.html">登录</a><a href="register.html">注册</a><a
            href="guestbook.html">留言</a></div>
</div>
<div id="childNav">
    <div class="wrap">
        <ul class="clearfix">
            <li class="first"><a href="index.jsp">首页</a></li>
            <li><a href="#">影视</a></li>
            <li><a href="#">少儿</a></li>
            <li><a href="#">动漫</a></li>
            <li><a href="#">小说</a></li>
            <li><a href="#">外语</a></li>
            <li><a href="#">数码相机</a></li>
            <li><a href="#">笔记本</a></li>
            <li><a href="#">羽绒服</a></li>
            <li><a href="#">秋冬靴</a></li>
            <li><a href="#">运动鞋</a></li>
            <li><a href="#">美容护肤</a></li>
            <li><a href="#">家纺用品</a></li>
            <li><a href="#">婴幼奶粉</a></li>
        </ul>
    </div>
</div>
<div id="position" class="wrap">
    您现在的位置：<a href="index.html">易买网</a> &gt; <a href="product-list.html">图书音像</a>
</div>
<div id="main" class="wrap">
    <div class="lefter">
            <%@include file="logo.jsp"%>
        <div class="spacer"></div>
        <div class="last-view" style="margin-left: -100px;width: 200px;">
            <h2>最近浏览</h2>
            <dl class="clearfix">
                <dt><img src="images/product/0_tiny.gif"/></dt>
                <dd><a href="product-view.html">法国德菲丝松露 精品巧克力500g/盒</a></dd>
                <dt><img src="images/product/0_tiny.gif"/></dt>
                <dd><a href="product-view.html">法国德菲丝松露 精品巧克力500g/盒</a></dd>
            </dl>
        </div>
    </div>
    <div class="main">
        <div class="product-list">
            <h2>全部商品</h2>
            <div class="clear"></div>
            <ul class="product clearfix" id="productlist">

            </ul>
            <div class="clear"></div>
            <div class="pager">
                <ul class="clearfix">
                    <li><a href="javascript:void(0)" class="pages" id="first">首页</a></li>
                    <li><a href="javascript:void(0)" class="pages" id="prevPage">上一页</a></li>
                    <li>当前页:<span id="current"></span></li>
                    <li><a href="javascript:void(0)" class="pages" id="nextPage">下一页</a></li>
                    <li><a href="javascript:void(0)" class="pages" id="lastPage">末页</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="clear"></div>
</div>
<div id="footer">
    Copyright &copy; 2010   北大青鸟 All Rights Reserved. 京ICP证1000001号
</div>
</body>
</html>
<script type="text/javascript">
    var pageNo = null;
    var prevPageNo = null;
    var nextPageNo = null;
    var totalPages=null;
    $(function () {
        var getList = function (current) {
            $.ajax({
                type: "POST",
                url: "AllProductServlet",
                dataType: "JSON",
                data: {
                    pageNo: current || 1
                },
                success: function (data) {
                    $(".single").remove();
                    $.each(data.items, function (index, obj) {
                        var productlist = "<li class='single'><dl><dt><a href='product-view.jsp' target='_blank'><img src='images/product/" + obj.pic + "'/></a></dt><dd class='title'><a href='product-view.jsp' target='_blank'>" + obj.productname + "</a></dd><dd class='price'>￥" + obj.price + "</dd></dl></li>";
                        $("#productlist").append(productlist);
                        prevPageNo =data.prevPageNo;
                        pageNo = data.pageNo;
                        nextPageNo=data.nextPageNo;
                        totalPages=data.totalPage;
                       /* var newpage="<li><a href='javascript:void(0)' class='pages' id='third'>3</a></li>";*/
                    })
                    $("#current").html(pageNo);
                }
            })
        }
        getList();
        $("#current").html(pageNo);
        $(".pages").click(function () {
            var idvale = $(this).attr("id");
            if (idvale == "prevPage") {
                getList(prevPageNo);
            } else if (idvale == "nextPage") {
                getList(nextPageNo);
            } else if (idvale == "first") {
                getList(1);
            } else if (idvale == "lastPage") {
                getList(totalPages);
            }
        });
    });
</script>

